import React from "react";
import Link from "next/link";
import Image from "next/image";
import RenderTag from "./RenderTag";

const networkList = [
	{
		_id: "1",
		title: "Would it be appropriate to point out an error in another paper during a referee report?",
	},
	{
		_id: "2",
		title: "How can an airconditioning machine exist?",
	},
	{
		_id: "3",
		title: "Interrogated every time crossing UK Border as citizen",
	},
	{
		_id: "4",
		title: "Low digit addition generato",
	},
	{
		_id: "5",
		title: "What is an example of 3 numbers that do not make up a vector?",
	},
];

const tagsList = [
	{
		_id: "1",
		name: "javascript",
		total: 20152,
	},
	{
		_id: "2",
		name: "Next.js",
		total: 18493,
	},
	{
		_id: "3",
		name: "React.js",
		total: 16269,
	},
	{
		_id: "4",
		name: "javascript",
		total: 15121,
	},
	{
		_id: "5",
		name: "Node.js",
		total: 14431,
	},
	{
		_id: "6",
		name: "Python",
		total: 9429,
	},
	{
		_id: "7",
		name: "Microsoft Azure",
		total: 9429,
	},
];

export default function RightSideBar() {
	return (
		<section className="background-light-900_dark200 custom-scrollbar light-border sticky right-0 top-0 h-screen flex flex-col  overflow-y-auto border-l p-6   dark:shadow-none max-xl:hidden lg:w-[330px]">
			<div className="flex flex-col gap-8 pt-6">
				<h3 className="h3-bold text-dark-200 dark:text-light-900">
					Hot Network
				</h3>
				{networkList.map((item) => (
					<Link
						key={item._id}
						href={`/netwwork/${item._id}`}
						className="flex  justify-between gap-3 "
					>
						<p className="text-dark-500 dark:text-light-700  body-medium">
							{item.title}
						</p>
						<Image
							src="/assets/icons/arrow-right.svg"
							width={20}
							height={20}
							alt="arrow-right"
						></Image>
					</Link>
				))}
			</div>
			<div className="mt-16">
				<h3 className="h3-bold text-dark-200 dark:text-light-900">
					Popular Tags
				</h3>
				<div className="mt-7 flex flex-col gap-4">
					{tagsList.map((tag) => (
						<RenderTag
							showCount
							_id={tag._id}
							name={tag.name}
							total={tag.total}
						/>
					))}
				</div>
			</div>
		</section>
	);
}
